<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <p>44</p>
    </ul>


    <script>

        // 事件委托：将事件委托给父元素来绑定
        // 事件委托的原理：事件冒泡(子元素的事件都会向上传播给父元素)
        // 事件委托的优点：
        //    1 减少事件处理函数
        //    2 可以给将来的标签绑定事件



        // 无法给将来的标签绑定事件
        // var oLis = document.querySelectorAll('li') ;
        // oLis.forEach(function(v){
        //     v.onclick = function() {
        //         console.log(666);
        //     }
        // })


        var oUl = document.querySelector('ul') ;

        oUl.onclick = function(e) {
            // console.log(e.target.tagName);  // 大写的
            if(e.target.tagName === 'LI') {
                console.log(e.target.innerHTML);
            }
        }


        setTimeout(function() {
            var oLi = document.createElement('li') ;
            oLi.innerHTML = '我是穿越来的' ;
            oUl.appendChild(oLi) ;
        },3000)

    </script>
    
</body>
</html>